How does the Ajax.BeginForm helper work in ASP.NET MVC?

Question

ICSM Computer · Answer

Instead of causing a full-page reload, a form that submits data to the server 
asynchronously (through AJAX) is created using the 
Ajax.BeginForm helper in ASP.NET MVC. It is a component of the jQuery Unobtrusive Ajax library from
Microsoft.
Fundamental Syntax
@using (Ajax.BeginForm("ActionName", "ControllerName", new AjaxOptions
{
    HttpMethod = "POST",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "targetElementId",
    OnSuccess = "onSuccessCallback",
    OnFailure = "onFailureCallback"
}, new { @class = "form-class" }))
{
    @Html.TextBox("Name")
    andlt;input type="submit" value="Submit" /andgt;
}
The Way It Operates
Create a andlt;formandgt; tag with:
data-ajax="true": instructs the jQuery Unobtrusive Ajax library to use the form submission and send it using AJAX.Other configuration-related data-ajax-* attributes for configuration.Instead of sending it via a conventional post, jQuery intercepts the form submission and sends it via
XMLHttpRequest.
Handling of responses::
The DOM element indicated in UpdateTargetId is updated if the request is successful.Callback functions like OnSuccess and OnFailure handle custom client-side logic.
AjaxOptions Properties
Property
Description
HttpMethod
GET or POST
UpdateTargetId
The ID of the HTML element to update with the response
InsertionMode
Specifies how the response is inserted (Replace, InsertBefore,
InsertAfter)
OnSuccess
JavaScript function to call on success
OnFailure
JavaScript function to call on failure
LoadingElementId
Shows a loading indicator during the request
Requirements
To use Ajax.BeginForm, ensure you have the following scripts:
andlt;script src="~/Scripts/jquery.unobtrusive-ajax.min.js"andgt;andlt;/scriptandgt;
Also make sure bundling or layout files include jQuery.
Example HTML Output
From the helper:
andlt;form data-ajax="true"
      data-ajax-method="POST"
      data-ajax-mode="replace"
      data-ajax-update="#targetElementId"
      action="/ControllerName/ActionName"
      method="post"andgt;
    ...
andlt;/formandgt;
Common Pitfalls
Forgetting to include jquery.unobtrusive-ajax.jsNot enabling unobtrusive JavaScript (BundleConfig.EnableOptimizations)AJAX form not working if data-ajax=true is missing (check rendered HTML)

interview

How does the Ajax.BeginForm helper work in ASP.NET MVC?

ICSM Computer

Can you answer this question?

1 Answers

Fundamental Syntax

The Way It Operates

AjaxOptions Properties

Requirements

Example HTML Output

Common Pitfalls

Liked By

Property	Description
`HttpMethod`	GET or POST
`UpdateTargetId`	The ID of the HTML element to update with the response
`InsertionMode`	Specifies how the response is inserted (`Replace`, `InsertBefore`, `InsertAfter`)
`OnSuccess`	JavaScript function to call on success
`OnFailure`	JavaScript function to call on failure
`LoadingElementId`	Shows a loading indicator during the request